<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库区管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">

    <span>按条件查询</span>
    <el-select v-model="mid" placeholder="请选择仓库" @change="findTRs">
        <el-option label="默认"  :value="0"></el-option>
        <el-option
                v-for="m in menu"
                :key="m.id"
                :label="m.wareName"
                :value="m.id">
        </el-option>
    </el-select>
    <el-select v-model="trId" placeholder="请选择货区"> <!--@change="findOneTR"-->>
        <el-option label="默认"  :value="0"></el-option>
        <el-option
                v-for="tr in TReservoirs"
                :label="tr.goodsName"
                :key="tr.id"
                :value="tr.id">
        </el-option>
    </el-select>
    <el-date-picker
            v-model="time"
            type="date"
            placeholder="选择日期"
            @change="update"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
    </el-date-picker>
    <el-button type="success" @click="selectReservoirs">搜索</el-button>
    <br>
    <el-button type="success" @click="findAllTReservoirsAll()">查找所有货区</el-button>
    <el-button type="success" @click="addTReservoir()">添加货区</el-button>
    <br>
    <template>
        <el-table
                ref="multipleSelection"
                :data="pageContext.records"
                tooltip-effect="dark"
                style="width: 100%"
                :default-sort = "{prop: 'id', order: 'shelvesNum'}"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="库区id"
                    prop="id"
                    sortable
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="货区编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goodsNo }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="货区名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.goodsName}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="所属仓库id"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareId}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="cargoNum"
                    sortable
                    label="货架数目"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.shelvesNum}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" >{{ scope.row.dateTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="区域面积"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.area}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    width="180">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="statusMe(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.describe}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        </el-table>
    </template>
    <el-dialog :visible.sync="dialogFormVisible" :title="updateTReservoir">
        <el-form :model="TReservoir">
            <el-form-item label="货区编号" :label-width="formLabelWidth">
                <el-input v-model="TReservoir.goodsNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货区名称" :label-width="formLabelWidth">
                <el-input v-model="TReservoir.goodsName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属仓库" :label-width="formLabelWidth">
                <el-select v-model="TReservoir.wareId"> <!--@change="findOneTR"-->>
                    <el-option
                            v-for="m in menu"
                            :key="m.id"
                            :label="m.wareName"
                            :value="m.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="货架数目" :label-width="formLabelWidth">
                <el-input v-model="TReservoir.shelvesNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                <el-date-picker v-model="TReservoir.dateTime" type="datetime" readonly="readonly"></el-date-picker>
                </br>
                <el-date-picker v-model="TReservoir.dateTime" value-format="timestamp" type="datetime"
                                placeholder="更改创建时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="区域面积" :label-width="formLabelWidth">
                <el-input v-model="TReservoir.area" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <span>请设置仓库状态 打开仓库是1,关闭仓库是0</span>
                <el-input v-model="TReservoir.status" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="TReservoir.describe" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sure">确 定</el-button>
        </div>
    </el-dialog>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6,5,4,3,2,1]"
                :page-size="row"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageContext.total"
               >
        </el-pagination>
    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            pageContext: "",
            total: 0,
            current: 1,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            TReservoir: "",
            row: 5,
            updateTReservoir: "",
            multipleSelection: [],
            fun: "",
            arr: [],
            dialogTreeVisible: false,
            menu: " ",
            mid: "",
            TReservoirs: "",
            trId: "",
            time: "",
        },

        methods: {
            page: function () {
                axios.get("/findAllTReservoir?current=" + this.current + "&&row=" + this.row).then(res => {
                    res.data.records.forEach(tr => {
                        if (tr.status == 1) {
                            tr.status = true
                        } else {
                            tr.status = false
                        }
                    })
                    this.pageContext = res.data

                })
            },
            select: function () {
                axios.get("/findOneWh").then(res => {
                    this.menu = res.data
                })
            },

            handleSizeChange(val) {
                this.current = 1
                this.row = val
                this.page()
            },
            handleCurrentChange(val) {
                this.current = val
                this.page()

            },
            handleEdit(index, row) {
                if (row.id != null) {
                    this.TReservoir = JSON.parse(JSON.stringify(row))
                    if(this.TReservoir.status=true){
                        this.TReservoir.status=1
                    }else{
                        this.TReservoir.status=0
                    }
                    this.updateTReservoir = "更新货区"
                    this.dialogFormVisible = true
                }
            },
            handleDelete(index, row) {
                console.log(row.id)
                if (confirm("确认删除嘛")) {
                    axios.delete("/deleteTReservoir/" + row.id).then(res => {
                        console.log(res.data);
                        this.page()
                    })
                }
                console.log(index, row);
            },
            addTReservoir() {
                this.updateTReservoir = "添加货区"
                this.TReservoir = {}
                this.dialogFormVisible = true
            },
            sure() {
                if (this.TReservoir.id != null) {
                    axios.put("/updateTReservoir", this.TReservoir).then(res => {
                        this.dialogFormVisible = false
                        alert("更新成功")
                        this.page();
                    })
                } else {
                    axios.post("/addTReservoir", this.TReservoir).then(res => {
                        if (res.data == "ok") {
                            this.dialogFormVisible = false
                            alert("添加成功")
                            this.page();
                        }
                    })
                }

            },
            cancel() {
                this.dialogFormVisible = false
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleSelection.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleSelection.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleCommand(command) {
                console.log(command)

            },
            findTRs(id) {
                axios.get("/reservoir/" + id).then(res => {
                    this.TReservoirs = res.data
                    this.trId = "请选择货区";
                })
            },
            selectReservoirs() {
                if (this.time == null || this.time == "" && this.time.length == 0) {
                    if (this.mid > 0) {
                        if (this.trId == "请选择货区") {
                            let times = "没有"
                            axios.get("/findCargoAreaMan?wid=" + this.mid + "&&trId=" + 0 + "&&time=" + times).then(res => {
                                this.pageContext.records = res.data
                                this.pageContext.records.forEach(tr => {
                                    if (tr.status == 1) {
                                        tr.status = true
                                    } else {
                                        tr.status = false
                                    }
                                })
                            })
                        } else {
                            let times = "没有"
                            axios.get("/findCargoAreaMan?wid=" + this.mid + "&&trId=" + this.trId + "&&time=" + times).then(res => {
                                this.pageContext.records = res.data
                                this.pageContext.records.forEach(tr => {
                                    if (tr.status == 1) {
                                        tr.status = true
                                    } else {
                                        tr.status = false
                                    }
                                })

                            })
                        }
                    } else {
                        alert("请你选择一个仓库或者时间进行精准查询！！！")
                    }
                } else {
                    if (this.mid > 0 && this.mid != "") {
                        if (this.trId == "请选择货区") {
                            axios.get("/findCargoAreaMan?wid=" + this.mid + "&&trId=" + 0 + "&&time=" + this.time).then(res => {
                                this.pageContext.records = res.data
                                this.pageContext.records.forEach(tr => {
                                    if (tr.status == 1) {
                                        tr.status = true
                                    } else {
                                        tr.status = false
                                    }
                                })
                            })
                        } else {
                            axios.get("/findCargoAreaMan?wid=" + this.mid + "&&trId=" + this.trId + "&&time=" + this.time).then(res => {
                                this.pageContext.records = res.data

                                this.pageContext.records.forEach(tr => {
                                    if (tr.status == 1) {
                                        tr.status = true
                                    } else {
                                        tr.status = false
                                    }
                                })
                            })
                        }
                    } else {
                        if (this.trId == "请选择货区") {
                            axios.get("/findCargoAreaMan?wid=" + 0 + "&&trId=" + 0 + "&&time=" + this.time).then(res => {
                                this.pageContext.records = res.data

                                this.pageContext.records.forEach(tr => {
                                    if (tr.status == 1) {
                                        tr.status = true
                                    } else {
                                        tr.status = false
                                    }
                                })
                            })
                        } else {
                            axios.get("/findCargoAreaMan?wid=" + 0 + "&&trId=" + 0 + "&&time=" + this.time).then(res => {
                                this.pageContext.records = res.data
                                this.pageContext.records.forEach(tr => {
                                    if (tr.status == 1) {
                                        tr.status = true
                                    } else {
                                        tr.status = false
                                    }
                                })
                            })
                        }
                    }
                }
            },
            findAllTReservoirsAll() {
                this.page();
            },
            update() {
                console.log(this.time)
            },
            statusMe(zt) {
                    axios.get("/findOneMenu/" + zt.wareId).then(res => {
                        if(res.data.status=="1"){
                            if(zt.status){
                                zt.status=1
                            }else{
                                zt.status=0
                            }
                            axios.put("/updateTReservoir", zt).then(res => {
                                this.page();
                                alert("更新成功")
                            })
                        }else{
                            alert("仓库是关闭的,不可以修改！！！")
                            zt.status=0;
                        }
                    })
            }
        },
        mounted() {
            this.page();
            this.select();
        }
    })
</script>
</body>
</html>